<template>
    <div class="progress-box" :style="{width: width}">
        <div class="progress-bar" ref="progressBar" @click="clickBar($event)">
            <div class="progress-bg" :style="bgWidth"></div>
            <div class="d-circle" ref="dCircle" draggable="false" :style="cStyle"
                @touchmove="touchmove($event)"
                @mousedown="mouseDown($event)"
            ></div>
        </div>
        <div class="progress-value">{{value}}%</div>
    </div>
</template>

<script>
    export default {
        data ()  {
            return {
                location: {
                    left: 0
                }
            }
        },
        props: {
            value: {
                required: true,
                type: Number,
                default: 0
            },
            width: {
                type: String,
                default: '100%'
            }
        },
        computed : {
            cStyle () {
                return { left: this.location.left + 'px'};
            },
            bgWidth () {
                let dragCircle = this.$refs.dCircle;
                let w = dragCircle ? dragCircle.offsetWidth / 2 : 0;
                return { width: this.location.left + w + 'px'};
            }
        },
        watch: {
            value: {
                handler: function (newVal) {
                    this.$nextTick(() => {
                        this.calcPosition(newVal);
                    });
                },
                immediate: true
            }
        },
        methods: {
            calcPosition (newVal) {
                let progressBar = this.$refs.progressBar;
                let pWidth = progressBar.offsetWidth;

                let dragCircle = this.$refs.dCircle;
                let maxLeft = pWidth - dragCircle.offsetWidth;

                let left = maxLeft * newVal / 100;
                this.location.left = left;
            },
            clickBar ($event) {
                let progressBar = this.$refs.progressBar;
                let pWidth = progressBar.offsetWidth;

                let parentLeft = progressBar.offsetLeft;
                let offsetParent = progressBar.offsetParent; // 如果当前元素的定位元素不是body, 则一直往上遍历求所有定位父元素的offsetLeft的和
                while (offsetParent) {
                    parentLeft += offsetParent.offsetLeft;
                    offsetParent = offsetParent.offsetParent;
                }
                let pLeft = parentLeft;

                let dragCircle = this.$refs.dCircle;
                let maxLeft = pWidth - dragCircle.offsetWidth;

                let left = $event.pageX - pLeft;
                left = Math.max(0, left);
                left = Math.min(left, maxLeft);
                let percent = parseInt((left / maxLeft).toFixed(2) * 100);
                this.$emit('input', percent);
            },
            touchmove (e) { // 移动端touchmove事件
                let progressBar = this.$refs.progressBar;
                let pWidth = progressBar.offsetWidth;

                let parentLeft = progressBar.offsetLeft;
                let offsetParent = progressBar.offsetParent; // 如果当前元素的定位元素不是body, 则一直往上遍历求所有定位父元素的offsetLeft的和
                while (offsetParent) {
                    parentLeft += offsetParent.offsetLeft;
                    offsetParent = offsetParent.offsetParent;
                }
                // let pLeft = progressBar.offsetLeft;
                let pLeft = parentLeft;

                let dragCircle = this.$refs.dCircle;
                let maxLeft = pWidth - dragCircle.offsetWidth;

                let target = e.touches[0];
                let left = target.pageX - pLeft;
                left = Math.max(0, left);
                left = Math.min(left, maxLeft);
                let percent = parseInt((left / maxLeft).toFixed(2) * 100);
                // this.location.left = left;
                this.location.percent = percent;
                this.$emit('input', percent);
            },
            mouseDown (e) {
                document.addEventListener('mousemove', this.documentMove, false);
                document.addEventListener('mouseup', this.mouseup, false);
            },
            mouseup () { // 鼠标抬起时将注册在document上的事件remove掉
                document.removeEventListener('mousemove', this.documentMove, false);
                document.removeEventListener('mouseup', this.mouseup, false);
            },
            documentMove ($event) {
                let progressBar = this.$refs.progressBar;
                let pWidth = progressBar.offsetWidth;

                let parentLeft = progressBar.offsetLeft;
                let offsetParent = progressBar.offsetParent; // 如果当前元素的定位元素不是body, 则一直往上遍历求所有定位父元素的offsetLeft的和
                while (offsetParent) {
                    parentLeft += offsetParent.offsetLeft;
                    offsetParent = offsetParent.offsetParent;
                }
                // let pLeft = progressBar.offsetLeft;
                let pLeft = parentLeft;

                let dragCircle = this.$refs.dCircle;
                let maxLeft = pWidth - dragCircle.offsetWidth;

                let left = $event.pageX - pLeft;
                left = Math.max(0, left);
                left = Math.min(left, maxLeft);
                let percent = parseInt((left / maxLeft).toFixed(2) * 100);
                this.$emit('input', percent);
            }
        }
    }
</script>

<style lang="scss" scoped>
.progress-box {
    font-size: 14px;
    display: flex;
    align-items: center;
    .progress-bar {
        flex: 1;
        border: 1px solid rgba(255, 204, 0, 1);
        border-radius: 14px;
        height: 12px;
        position: relative;
        box-sizing: border-box;
        cursor: pointer;
        .progress-bg {
            width: 0;
            height: 10px;
            background-color: rgba(255, 204, 0, 1);
            border-top-left-radius: 9px;
            border-bottom-left-radius: 9px;
        }
        .d-circle {
            width: 18px;
            height: 18px;
            position: absolute;
            left: 0px;
            top: -5px;
            background-color: rgb(255,204,153);
            border-radius: 50%;
            cursor: pointer;
        }
    }
    .progress-value {
        width: 50px;
        text-align: center;
    }
}
</style>
